<template>
	<ls-page title="">
		<view class="book-container">
			<view class="book-banner">
				<swiper style="height: 702rpx">
					<swiper-item class="book-swiper-item" v-for="(v, k) in bannerList" :key="k">
						<image class="book-banner-item" :src="v"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="book-main">
				<view class="cm-card">
					<view class="book-panel">
						<view class="book-panel-heading">
							<view class="book-panel-heading__title">{{ shopInfo.orgName }}</view>
							<view class="book-panel-heading__shop" @click="goCheckShop">
								切换门店
								<text class="triangle"></text>
							</view>
						</view>
						<view class="book-panel-info">
							<view class="book-panel-info-left">
								<view class="book-panel-info__time">
									营业时间：{{ shopInfo.orgStartTime }}-{{ shopInfo.orgEndTime }}</view>
								<view class="book-panel-info__loc">
									<image v-if="themetype == '001'" class="book-panel-info__icon"
									src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_icon_address.png"></image>
										<image v-else class="book-panel-info__icon"
										src="https://oss.jtmckj.com/wmp/kbq/common/i_icon_address.png" ></image>
									<text
										class="book-panel-info__text">{{ shopInfo.orgAddress }}</text>
								</view>
							</view>
						<!-- 	<view class="book-panel-info-right" @click="share">
								<view class="vanicon"></view>
								<button  class="book-panel-info__share"></button>
							</view> -->
						</view>
						<view class="book-panel-control">
							<view class="book-panel-control-btn">
								<image v-if="themetype == '001'" class="book-panel-control-image"
									src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_choose.png"
									@click="goCheckTableThrottle">
								</image>
								<image v-else-if="themetype == '006'" class="book-panel-control-image"
									src="https://oss.jtmckj.com/wmp/kbq/book/i_choose.png"
									@click="goCheckTableThrottle2">
								</image>
								<image v-else class="book-panel-control-image"
									src="https://oss.jtmckj.com/wmp/kbq/book/i_choose.png"
									@click="goCheckTableThrottle2">
								</image>
							</view>
							<view class="book-panel-control-list" style="padding-left:50rpx;padding-right:50rpx;">
								<!-- <view class="book-panel-control-item" @click="onService('navigation')">
									<image class="book-panel-control__icon"
										src="https://oss.jtmckj.com/wmp/kbq/book/i_daohang.png"></image>
									<view class="book-panel-control__info">
										<view class="book-panel-control__title">导航</view>
										<view class="book-panel-control__subtitle">距离{{ distance }}610.70km</view>
									</view>
								</view> -->
								<view class="book-panel-control-item tel" @click="onService('call')">
									<image v-if="themetype == '001'" class="book-panel-control__icon"
										src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_phone.png"></image>
									<image  v-else class="book-panel-control__icon"
										src="https://oss.jtmckj.com/wmp/kbq/book/i_phone.png"></image>
									<view class="book-panel-control__info">
										<view class="book-panel-control__title">电话</view>
										<view class="book-panel-control__subtitle">
											{{ shopInfo.orgTelephone }}
										</view>
									</view>
								</view>
								<view class="book-panel-control-item service" @click="onService('show')">
									<image v-if="themetype == '001'" class="book-panel-control__icon"
										src="https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_add.png"></image>
									<image  v-else class="book-panel-control__icon"
										src="https://oss.jtmckj.com/wmp/kbq/book/i_add.png"></image>
									<view class="book-panel-control__info">
										<view class="book-panel-control__service">添加客服</view>
									</view>
								</view>
							</view>
						</view>
						<view class="book-panel-browse">
							<view class="book-panel-browse-ing">正在浏览：</view>
							<view class="book-panel-browse-avatar">
								<image class="book-panel-browse-item" :src="v.userHead" mode="aspectFill"
									v-for="(v, k) in lookInfo" :key="k"></image>
							</view>
							<view class="book-panel-browse-total">浏览量： {{ lookNum }}人</view>
						</view>
					</view>
				</view>
				<view class="cm-card">
					<view class="book-intro">
						<view class="book-intro-heading">品牌介绍</view>
						<view class="book-intro-content">{{ shopInfo.orgRemark }}</view>
						<view class="book-intro-list">
							<image class="book-intro-item" :src="mainAttachment" mode="aspectFill"
								v-if="mainAttachment"></image>
							<image class="book-intro-item" :style="'display:' + (v ? 'block' : 'none')" :src="v"
								mode="aspectFill" v-for="(v, k) in attachments" :key="k"></image>
						</view>
					</view>
				</view>
				<view class="book-notice" @click="showReading = true">
					点击阅读
					<text class="highlight">《预订须知》</text>
				</view>
			</view>
		</view>
		<!-- 预订须知 -->
		<x-popup position="center" :show="showReading" title="预订须知" :closeIcon="false"  :closeOnClickOverlay="true"
			@update:show="showReading = $event">
			<view class="reading-popup">
				<view class="reading-popup-title">预订须知</view>
				<!-- <view class="reading-popup-subtitle">
		       												开放
		       												<text class="highlight">7</text>
		       												天内，每天
		       												<text class="highlight">00:00-17:00</text>
		       												可预订
		       								</view> -->
				<view class="reading-popup-content">
					<text>{{ shopInfo.reserveIntro }}</text>
				</view>
				<view class="reading-popup-agree" @click="radioChange('circular')">
					<!-- <image class="reading-popup-agree-radio" src="https://oss.jtmckj.com/wmp/qnjg/common/i_icon_radio.png"></image> -->
					<image slot="icon" :src="radio ? icon.active : icon.normal" class="reading-popup-agree-radio" />
					<text class="reading-popup-agree-text">我已阅读并同意</text>
				</view>
				<view class="reading-popup-control">
					<view class="close-btn" @click="showReading= false">
						取消
					</view>
					<view class="sumbit-btn" @click="onReading('confirm')">
						去预订
					</view>
				</view>
				<view class="reading-popup-memory" @click="radioChange('square')">
					<image slot="icon" :src="square ? icon.active_square : icon.normal_square"
						class="reading-popup-agree-radio" style="margin-right: 15rpx;" />
					<text class="reading-popup-agree-text">7天内不再显示</text>
				</view>
			</view>
		</x-popup>
		<!-- 添加客服 -->
		<x-popup class="self-popup" position="center" :show="showService" title="添加客服" :closeIcon="false" :closeOnClickOverlay="true"
			@update:show="showService = $event">
			<view class="service-popup">
				<image v-if="addImg" class="service-popup-code" :src="addImg"></image>
				<image v-if="!addImg" class="service-popup-code" src="https://oss.jtmckj.com/Roomdev/defut-img.png">
				</image>
			</view>
		</x-popup>
		<!-- 未选择门店 -->
		<x-popup position="center" :show="showDialog" :closeIcon="true" @confirm="confirmDialog"
			@update:show="showWine = $event">
			<view class="showdig_cotent">
				<view class="showdig_title">
					提示
				</view>
				<view style="height: 40rpx"></view>
				<view style="height: 80rpx; text-align: center; line-height: 80rpx; font-size: 32rpx; color: #212121">
					请先选择门店！</view>
				<view class="" style="height: 40rpx "></view>
				<view class="reading-popup-control2">
					<view class="close-btn" @click="cancleDialog">
						取消
					</view>
					<view class="sumbit-btn">
						确定
					</view>
				</view>
			</view>
		</x-popup>
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess,GetMinimsgTemplate  } from '@/api/public.js'
	import dayjs from 'dayjs'
	import { debounce } from '@/until/tools.js'
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	console.log(shopInfo, 'shopInfo')
	const userInfo = uni.getStorageSync('userInfo') //用户信息
    const themetype = uni.getStorageSync('themeInfo')?.type
	const lookNum = ref('') //浏览数量
	const lookInfo = ref([]) //浏览量图片

	const bannerList = ref([])
	const icon = {
		normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
		active: themetype == '001' ? 'https://oss.jtmckj.com/h5-uniapp/qnig/my/i_radio_choose.png' : 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png',
		normal_square: 'https://oss.jtmckj.com/wmp/images/common/i_checkbox_check.png',
		active_square: 'https://oss.jtmckj.com/wmp/kbq/common/i_square_choose.png',
	}

	const showService = ref(false) //添加客服弹层显示状态
	const showReading = ref(false) //预订须知弹层显示状态
	const showDialog = ref(false) //未选择门店提示弹层
	const radio = ref(false) //预订须知状态
	const square = ref(false) //7天不显示状态
	const addImg = ref('') //添加客服二维码
	const distance = ref('') //距离公里数
	const mainAttachment = ref('') //品牌介绍主图
    const attachments = ref([] )// 品牌介绍图片
	// -------------------------------------------------------初始化数据-----------------------------------------------------

	onLoad((options) => {
		onInit()
		getLookInfo()
		mainAttachment.value = shopInfo.mainAttachment
		attachments.value = shopInfo.attachment.split(',')
	})

	onShow(() => {
		if (shopInfo.reserveBanner) {
			bannerList.value = shopInfo.reserveBanner.split(',')
		}
	});

	// -------------------------------------------------------跳转操作-----------------------------------------------------

	const goCheckTableThrottle = debounce(function(e) {
		uni.$u.toast('门店暂无开放此功能')
		return;
		goCheckTable()
	}, 800)
	const goCheckTableThrottle2 = debounce(function(e) {
		goCheckTable()
	}, 800)
     
	const goCheckTable = async () => {
		const res = await GetMinimsgTemplate({msgTrigger:'5'})
		const flag = uni.getStorageSync('isSave7').radio
		if (!flag) {
			wx.showToast({ title: '请先阅读并同意预订须知', icon: 'none' });
			this.setData({
				showReading: true
			})
			return
		}

		uni.navigateTo({
			url: '/subpkg/view/bookTable/bookTable'
		})
	}


	const goCheckShop = () => {
		uni.navigateTo({
			url: '/subpkg/view/switchStores/switchStores'
		})
	}

	//未选择门店取消操作
	const cancleDialog = () => {
		uni.switchTab({
			url: '/pages/home/index'
		})
		showDialog.value = false
	}
	// 未选择门店确认操作
	const confirmDialog = () => {
		uni.redirectTo({
			url: '/subpkg/view/switchStores/switchStores'
		})
		showDialog.value = false
	}


	// -------------------------------------------------------判断阅读选中状态-----------------------------------------------------
	const onInit = () => {
		uni.getStorage({
			key: 'isSave7',
			success: (res) => {
				// 判断数据是否过期
				if (res.data.expire <= Date.now()) {
					// 数据过期，更新过期时间并存储
					uni.setStorage({
						key: 'isSave7',
						data: {
							value: false,
							expire: Date.now() + 24 * 60 * 60 * 1000 // 假设设置 24 小时过期
						}
					});
					// 显示需要阅读的内容
					showReading.value = true;
				} else {
					// 如果数据没有过期，更新 showReading 的值
					showReading.value = !res.data.value;
				}

				// 更新 radio 和 square 的值
				radio.value = res.data.radio;
				square.value = res.data.square;
			},
			fail: () => {
				// 如果获取失败，默认显示需要阅读的内容
				showReading.value = true;
			}
		});

	}

	//-------------------------------------------------------处理 radio 和 square 的切换-----------------------------------------------------
	const radioChange = (type) => {
		console.log(type, 'type')
		if (type === 'circular') {
			// 切换 radio 的值
			radio.value = !radio.value;

			// 更新本地存储
			uni.setStorage({
				key: 'isSave7',
				data: {
					radio: radio.value,
				}
			});

		} else if (type === 'square') {
			// 切换 square 的值
			square.value = !square.value;

		}
	};


	//-------------------------------------------------------去预订操作判断-----------------------------------------------------
	const onReading = (type) => {
		if (type === 'confirm') {
			if (!radio.value) {
				// msg('请先勾选阅读并同意');
				uni.$u.toast('请先勾选阅读并同意')
				return;
			}

			const currentTimestamp = Date.now(); // 获取当前时间戳
			const futureTimestamp = dayjs(currentTimestamp).add(7, 'day').valueOf(); // 计算7天后的时间戳

			// 使用 uni.setStorage 保存数据
			uni.setStorage({
				key: "isSave7",
				data: {
					value: square.value, // 是否7天不显示
					expire: futureTimestamp,
					radio: radio.value,
					square: square.value
				}
			});
		}

		showReading.value = false
	}

	//-------------------------------------------------------获取浏览量信息的函数-----------------------------------------------------
	const getLookInfo = async () => {
		try {
			const res = await HFiveMemberAppObjProcess({
				functionName: "GetH5ProgramView_H5",
				contentData: {}
			})
			lookNum.value = res.viewCount
			lookInfo.value = res.topUsers
			console.log(lookInfo.value, 'lookInfo.value')
		} catch (error) {
			console.error('获取浏览量信息失败', error)
		}
	}

	//-------------------------------------------------------添加客服操作-----------------------------------------------------
	const onService = (type) => {
		if (type === 'call') {
			uni.makePhoneCall({
				phoneNumber: shopInfo.orgTelephone
			});
		} 
		console.log(type)

		if (type === 'navigation') {
			uni.$u.toast('暂未开发')
			return
			uni.getLocation({
				type: 'gcj02', // Use 'gcj02' for China coordinates
				success: (res) => {
					//位置信息先写死， 登录的时候就要获取 
					let location = JSON
						.parse({ "address": "上海市浦东新区金桥路535号EKA·天物15幢空白区bar", "code": "0018", "distance": "615.15km", "endTime": "12:00:00", "latitude": 31.264451, "longitude": 121.576522, "name": "上海空白区", "startTime": "12:00:01", "telephone": "", "bookphone": "15959329689" })

					uni.openLocation({
						latitude: location.latitude, // 纬度，浮点数，范围为-90&#126;90，负数表示南纬
						longitude: location.longitude, // 经度，浮点数，范围为-180&#126;180，负数表示西经
						name: location.name, // 位置名
						address: location.address, // 详细地址
						scale: 18, // 地图缩放级别，整数，范围从1&#126;28。默认为最大    // Zoom level
						success: () => {
							console.log('Navigation successful');
						},
						fail: (err) => {
							console.log('Navigation failed', err);
						}
					});
				}
			});
		}

		if (type === 'show') {
			showService.value = !showService.value;
			if (!showService.value) return;
			HFiveMemberAppObjProcess({
				functionName: "WorkQrCode_H5",
				contentData: "",
			}).then(res => {
				console.log(res, 'dasda')
				addImg.value = res.data;
			});
		}
	}
	
	//-------------------------------------------------------分享功能-----------------------------------------------------
	const share = () => {
	  uni.showShareMenu({
	    withShareTicket: true,
	    menus: ['shareAppMessage', 'shareTimeline']
	  });
	};

	//-------------------------------------------------------获取位置信息-----------------------------------------------------
	const getLocation = () => {
		uni.getLocation({
			type: 'gcj02', // 中国坐标系
			success: (res) => {
				const latitude = res.latitude + '';
				const longitude = res.longitude + '';

				// 设置全局用户信息
				app.global.userInfo.latitude = latitude;
				app.global.userInfo.longitude = longitude;

				// 调用 API 获取组织信息
				Api.Common.GetOrganize.Do({ longitude, orgLatitude: latitude })
					.then((res) => {
						const orgCode = uni.getStorageSync('ORG_CODE'); // 获取存储的组织码
						if (orgCode) {
							// 如果是扫码进来的，直接根据 orgCode 查找
							const filteredOrgs = res.result.filter((org) => org.code === orgCode);
							app.global.location = filteredOrgs[0];
						} else {
							// 如果不是扫码进来的，选择最近的门店
							app.global.location = res.result[0];
							uni.setStorageSync('ORG_CODE', res.result[0].code); // 存储选择的门店代码
						}

						// 更新距离信息
						distance.value = app.global.location.distance;
					})
					.catch((err) => {
						console.error('获取组织信息失败:', err);
					});
			},
			fail: (err) => {
				console.error('获取位置信息失败:', err);
			},
		});
	};
</script>

<style lang="scss" scoped>
	.book-container {
		.book-banner {
			&-item {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

			.book-swiper-item {
				padding: 0 24rpx;
				box-sizing: border-box;
			}
		}

		.book-intro-content {
			color: #212121 !important;
		}

		.book-main {
			padding: 0 24rpx;

			// padding: 0  10rpx 0 3rpx;
			.cm-card {
				border-radius: 20rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				margin-top: 20rpx;
				background: var(--maincolor);

				.book-panel {
					&-heading {
						display: flex;
						justify-content: space-between;
						padding-top: 29rpx;
					}

					&-heading__title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 44rpx;
						color: var(--maincolorf1);
						line-height: 66rpx;
						width: 438rpx;
					}

					&-heading__shop {
						background: var(--mainbaccolor);
						border-radius: 8rpx;
						padding: 18rpx 42rpx 18rpx 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--dt-colorPink);
						line-height: 26rpx;
						align-self: flex-start;
						margin-top: 11rpx;
						position: relative;

						.triangle {
							width: 0;
							height: 0;
							border-left: 9rpx solid transparent;
							border-right: 9rpx solid transparent;
							border-top: 12rpx solid var(--dt-backcolorPink);
							position: absolute;
							top: 27rpx;
							right: 16rpx;
						}
					}

					&-info {
						padding-top: 18rpx;
						display: flex;
						justify-content: space-between;
					}

					&-info-left {}

					&-info__time {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--dt-colorPink);
						line-height: 26rpx;
						padding-top: 10rpx;
					}

					&-info__loc {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 30rpx;
						padding-top: 21rpx;
						display: flex;
					}

					&-info__icon {
						width: 20rpx;
						height: 20rpx;
						display: block;
						padding-top: 6rpx;
					}

					&-info__text {
						padding-left: 12rpx;
						display: block;
						color: var(--maincolorf1);
					}

					&-info-right {}

					.book-panel-info__share-btn {}

					.book-panel-info-right {
						position: relative;

						.vanicon {
							margin-right: 4rpx;
							width: 40rpx;
							height: 40rpx;
							background-image: url('https://oss.jtmckj.com/wmp/kbq/book/i_share.png');
							/* background-image: url("https://oss.jtmckj.com/wmp/images/home/book/i_share.png");*/
							background-size: 100% 100%;
							background-repeat: no-repeat;
							background-position: center;
							margin-top: 10rpx;
						}

						.share {
							position: absolute;
							left: 0;
							top: 0;
							opacity: 0;
							width: 40rpx;
							height: 40rpx;
						}
					}

					&-info__share {
						padding: 0;

						border: 0 !important;
						background: none;
					}

					&-control {
						padding-top: 57rpx;
					}

					&-control-btn {
						width: 480rpx;
						height: 100rpx;
						margin: auto;
					}

					&-control-image {
						display: block;
						width: 100%;
						height: 100%;
					}

					&-control-list {
						padding-top: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					&-control-item {
						display: flex;

						&.service {
							align-items: center;
						}

						&.tel {
							min-width: 268rpx;
						}
					}

					&-control__icon {
						width: 80rpx;
						height: 80rpx;
					}

					&-control__info {
						padding-left: 11rpx;
					}

					&-control__title {
						padding-top: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 24rpx;
						transform: scale(0.8);
						transform-origin: left;
						white-space: nowrap;
					}

					&-control__subtitle {
						padding-top: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf1);
						line-height: 24rpx;
						transform: scale(0.8);
						transform-origin: left;
						white-space: nowrap;
					}

					&-control__service {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf1);
						line-height: 36rpx;
						transform: scale(0.8);
						transform-origin: left;
						width: 50rpx;
					}

					&-browse {
						display: flex;
						align-items: center;
						padding: 40rpx 0;
					}

					&-browse-ing {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--third--self--color);
						line-height: 24rpx;
					}

					&-browse-avatar {
						display: flex;
						align-items: center;
					}

					&-browse-item {
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						padding-right: 8rpx;
					}

					&-browse-total {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 24rpx;
						padding-left: 8rpx;
					}
				}
			}
		}

		.book-intro {
			padding-top: 21rpx;

			&-heading {
				background-image: url('https://oss.jtmckj.com/wmp/qnjg/pre/i_brand.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 448rpx;
				padding: 18rpx 0;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolorf1);
				line-height: 36rpx;
			}

			&-content {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: var(--third--self--color);
				line-height: 46rpx;
				padding-top: 13rpx;
				text-align: justify;
			}

			&-list {
				padding: 6rpx 0 40rpx 0;
				display: flex;
				flex-wrap: wrap;
			}

			&-item {
				margin: 24rpx 24rpx 0 0;
				width: 202rpx;
				height: 202rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.book-notice {
			padding: 39rpx 0 30rpx 0;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--maincolorf2);
			line-height: 28rpx;

			.highlight {
				color: var(--dt-colorPink);
			}
		}
	}

	.reading-popup {
		width: 540rpx;
		/* padding: 0 39rpx 20rpx 48rpx;*/
		padding: 0 38rpx 20rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
			line-height: 36rpx;
			text-align: center;
			padding-top: 60rpx;
		}

		&-subtitle {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--maincolorf2);
			line-height: 28rpx;
			padding-top: 48rpx;

			.highlight {
				color: red;
			}
		}

		&-content {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: var(--maincolorf2);
			line-height: 56rpx;
			padding-top: 24rpx;
		}

		&-agree {
			padding-top: 45rpx;
			display: flex;
			align-items: center;
		}

		&-agree-radio {
			width: 32rpx;
			height: 32rpx;
		}

		.van-radio__label {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--third--self--color) !important;
			line-height: 24rpx;
			padding-left: 12rpx;
			padding-bottom: 5rpx;
		}

		&-agree-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--third--self--color);
			line-height: 24rpx;
			margin-left: 12rpx;
		}

		&-control {
			display: flex;
			justify-content: space-between;
			padding-top: 60rpx;
		}

		&-memory {
			text-align: center;
			padding-top: 50rpx;
			font-size: 0;
			margin-bottom: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-memory-radio {
			width: 24rpx;
			height: 24rpx;
		}

		&-memory-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--third--self--color);
			line-height: 24rpx;
			margin-left: 12rpx;
			display: inline-block;
		}
	}

	.service-popup {
		background-image: url('https://oss.jtmckj.com/wmp/kbq/book/i_icon_kf.png');
		background-size: 100% 100%;
		width: 686rpx;
		height: 900rpx;
		text-align: center;

		&-code {
			width: 480rpx;
			height: 480rpx;
			padding-top: 255rpx;
		}
	}

	.reading-popup-agree-text {
		color: var(--maincolorf2);
	}

	.reading-popup-control {
		display: flex;

		.close-btn {
			padding: 11px 0;
			border-radius: 20px;
			font-size: 16px;
			line-height: 16px;
			width: 124px;
			text-align: center;
			color: var(--maincolorf2);
			border: 1px solid var(--mainbaccolor24);
		}

		.sumbit-btn {
			padding: 11px 0;
			border-radius: 20px;
			font-size: 16px;
			line-height: 16px;
			width: 124px;
			text-align: center;
			color: var(--maincolor);
			border:1rpx solid var(--dt-bordercolorPink) ;
			background: var(--dt-backcolorPink);
		}
	}

	.self-popup {
		.x-popup .van-popup {
			border-radius: 38rpx !important;
		}
	}

	::v-deep .popup-content {
		padding: 0;

	}

	.showdig_cotent {
		width: 600rpx;

		.showdig_title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 700;
		}

		.reading-popup-control2 {
			display: flex;
			justify-content: center;

			.close-btn {
				padding: 11px 0;
				border-radius: 20px;
				font-size: 16px;
				line-height: 16px;
				width: 124px;
				text-align: center;
				border: 1px solid var(--maincolorbd5);
				margin-right: 40rpx;
			}

			.sumbit-btn {
				padding: 11px 0;
				border-radius: 20px;
				font-size: 16px;
				line-height: 16px;
				width: 124px;
				text-align: center;
				color: var(--maincolor);
				background: var(--maincolorf1);
			}
		}

	}
</style>